<template>
  <div class="loanSuccess">
    <van-nav-bar
        left-arrow
        @click-left="$router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')"
        :title="$t('提交成功')"
    >
      <template #left>
        <!--        <div style="padding: 10px">-->
        <!--          <div class="tab_nav_icon_left">-->
        <!--            <van-icon style=" vertical-align: middle;" name="arrow-left" size="18"/>-->
        <!--          </div>-->
        <!--        </div>-->
      </template>
    </van-nav-bar>
    <div class="content">
      <img class="image" src="../../assets/my/loanSuccess.png">
      <div class="success_text">{{ $t('贷款申请已提交成功') }}</div>
      <div class="tips">{{ $t('近期请留意电话及短信通知') }}</div>
    </div>
    <div style="text-align: center;margin-top: 50px ">
      <van-button class="confirm" type="primary" round @click="$router.replace('/DIjlFtCOoeJh/gCyKuncAiMJg')">
        {{ $t('查看贷款进度') }}
      </van-button>
    </div>
    <van-popup v-model:show="favorableShow" style="border-radius: 8px;">
      <template #default>
        <div class="dialog_body">
          <div class="content_text">{{favorableText}}
          </div>
          <div style="margin-top: 40px">
            <van-rate
                v-model="favorableValue"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
            />
          </div>
          <div style="margin-top: 20px;text-align: center">
            <van-button type="primary" style="width: 80%" @click="goToComment" round>Go to good reviews</van-button>
            <van-button class="reject_btn" @click="favorableShow = false" round>
              {{ $t('残忍拒绝') }}
            </van-button>
          </div>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import {useStore} from "vuex";
import {getIsFavorable, isTipsDownloadAddress} from "@/api/home";
import {onMounted, ref} from "vue";
import {Dialog} from 'vant'
import {useI18n} from "vue-i18n";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const store = useStore()
    const favorableShow = ref(false)
    const {t} = useI18n()
    const favorableValue = ref(5)
    const favorableUrl = ref(null)
    const favorableText = ref('')
    const productName = localStorage.getItem('productName')
    const goToComment = () => {
      favorableShow.value = false
      if (favorableValue.value <= 3) return
      if (window.android) {
        window.android.loanTrial(favorableUrl.value)
      } else {
        const a = document.createElement('a')
        a.href = favorableUrl.value
        a.click()
      }
    }

    //  获取引导弹框
    async function getDialog() {
      const res = await isTipsDownloadAddress({type: 1})
      if (res.code === 1) {
        const data = res.data
        if (data.submitPage === 1) {
          favorableShow.value = true
          favorableText.value = data.submitDescribe
          favorableUrl.value = data.submitUrl
        }

      }
    }

    onMounted(() => {
      setTimeout(() => {
        getDialog()
      }, 1000)
    })
    // 清除loading
    store.dispatch('changeLoading', false)
    return {
      favorableShow,
      favorableText,
      goToComment,
      favorableValue,
    }
  }
}
</script>

<style lang="less" scoped>
.loanSuccess {
  overflow: auto;
  height: 100vh;

  .content {
    margin-top: 30px;
    text-align: center;
    padding: 0 20px;

    .image {
      height: 160px;
      width: 160px;
    }

    .success_text {
      font-size: 16px;
      color: #333333;
      font-family: PingFang SC;
      font-weight: bold;
      margin-bottom: 15px;
      padding: 0 15px;
    }

    .tips {
      font-size: 14px;
      padding: 0 15px;
      color: #818181;
    }
  }


}
</style>
